<template>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div v-for="item in imgUrl" :key="item.bannerId" class="swiper-slide">
                <img :src="item.pic" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</template>

<script>

    import Swiper from 'swiper';
    import "swiper/css/swiper.css"
    import { getBanner } from '@/api/index'
    export default {
        name: 'Topswiper',

        data() {
            return {
                imgUrl: {},
            }
        },
        async mounted() {
            let res = await getBanner(1)
            this.imgUrl = res.banners
            new Swiper('.swiper-container', {
                loop: true, // 循环模式选项  
                effect: 'fade',//渐变切换
                paginationClickable: true,//分页器切换
                paginationClickable: true,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                // 如果需要前进后退按钮
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
            })
        },

    }
</script>

<style scoped lang="scss">
    .swiper-container {
        width: 7.1rem;
        height: auto;
    }

</style>
